<template>
  <div>
    <div class="out-border layout-width m-auto amend-container">
      <el-form class="form-content" :model="brandEditFormInfo" :rules="brandEditrules" ref="brandEditFormInfo" label-width="100px">
        <el-form-item label="品牌名称" prop="name" :required="true">
          <el-input v-model="brandEditFormInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
          <el-input v-model="brandEditFormInfo.firstLetter"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" required="true">
          <div>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList1" list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="品牌专区大图">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌故事">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="brandEditFormInfo.brandStory"> </el-input>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="brandEditFormInfo.sort"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="name">
          <el-radio v-model="showRadio" label="1">是</el-radio>
          <el-radio v-model="showRadio" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="品牌制造商" prop="name">
          <el-radio v-model="brandRadio" label="1">是</el-radio>
          <el-radio v-model="brandRadio" label="2">否</el-radio></el-form-item
        >
        <el-button type="primary">提交</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import { fetchBrandItemInfo } from '@/api/api'
export default {
  name: 'EditProduct',
  data() {
    var checkSortType = (rule, value, callback) => {
      if (!(typeof value == 'number')) {
        callback(new Error('排序必须为数字'))
      }
    }
    return {
      brandEditFormInfo: {},
      brandEditrules: {
        sort: [
          {
            require: true,
            validator: checkSortType,
            messgae: '排序必须为数字',
          },
        ],
      },
      showRadio: '1',
      brandRadio: '1',
      handlePreview: '',
      fileList1: [
        {
          name: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180518/5a912944N474afb7a.png',
          url: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180518/5a912944N474afb7a.png',
        },
      ],
      fileList2: [
        {
          name: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180518/5afd7778Nf7800b75.jpg',
          url: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180518/5afd7778Nf7800b75.jpg',
        },
      ],
    }
  },
  methods: {
    async handleBrandInfo() {
      let b_id = this.$route.query.id
      let pro_info = await fetchBrandItemInfo(b_id)
      this.brandEditFormInfo = pro_info.data
      console.log(pro_info)
      this.showRadio = pro.info.shaowStatus.toString()
      this.brandRadio = pro.info.factoryStatus.toString()
    },
    handleRemove() {},
    handlePreview(file) {},
  },
  created() {
    this.handleBrandInfo()
  },
}
</script>
<style lang="scss" scoped>
.amend-container {
  padding: 35px 35px 15px;
}
</style>
